<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <div class="app-container">
      <div class="build-container">
        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1" description="构建reader">1</el-step>
          <el-step title="步骤 2" description="构建writer">2</el-step>
          <el-step title="步骤 3" description="表映射">3</el-step>
          <el-step title="步骤 4" description="批量创建">4</el-step>
        </el-steps>

        <div v-show="active === 1" class="step1">
          <Reader ref="reader" />
        </div>
        <div v-show="active === 2" class="step2">
          <Writer ref="writer" :readerInfo="readerInfo" />
        </div>
        <div v-show="active === 3" class="step3">
          <Mapper ref="mapper" />
        </div>
        <div v-show="active === 4" class="step4">
          <el-button type="primary" @click="bulid">构建</el-button>
          <el-button type="primary" @click="createJob">创建任务</el-button>
          <el-button type="info" @click="handleCopy(inputData,$event)">复制json</el-button>
          <div style="margin-bottom: 20px;" />
            <json-editor  ref="jsonEditor" v-model="configJson" />
        </div>

        <el-button :disabled="active === 1" style="margin-top: 12px;" @click="last">上一步</el-button>
        <el-button v-show="active !== 4" type="primary" style="margin-top: 12px;margin-bottom: 12px;"
          @click="next">下一步</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as jobTemplate from '@/api/dataextraction/single.js'
import Pagination from '@/components/Pagination'
import JsonEditor from '@/components/JsonEditor'
import clip from '@/utils/clipboard'
import Reader from './reader'
import Writer from './writer'
import Mapper from './mapper'

export default {
  props: {
    // 定义要接收的Props属性
    propValue: String // 你可以在这里指定数据类型
  },
  name: 'single',
  components: { Reader, Writer, Pagination, Mapper,JsonEditor },
  data() {
    return {
      dialogStatus: this.propValue,
      textMap: {
        update: '编辑',
        create: '新建'
      },
      dialogFormVisible: false,
      jobTemplateSelectDrawer: false,
      list: null,
      listLoading: true,
      readerInfo: {},//reader返回信息
      writerInfo: {},//writer返回信息
      togertherArr: [],
      extractionName: '',//数据集名称
      inputData:'',
      configJson: '',//JSON对象
      str:'',//json字符串
      active: 1,
    }
  },
  created() {
    // this.getJdbcDs()
  },
  methods: {
    open() {
      this.dialogFormVisible = true
      this.active = 1
      this.rest()
    },
    next() {
      console.log(this.readerInfo,'reader')
      console.log(this.writerInfo,'writer')
      const fromTableList = this.$refs.reader.getData().columns
      const toTableList = this.$refs.writer.getData().columns
      this.readerInfo = this.$refs.reader.getData()
      this.writerInfo = this.$refs.writer.getData()
      // const fromTableName = this.$refs.reader.getData().tableName
      // 第一步 reader 判断是否已选字段
      if (this.active === 1) {
        // 实现第一步骤读取的表和字段直接带到第二步骤
        this.active++
      } else {
        // 将第一步和第二步得到的字段名字发送到第三步
        if (this.active === 2) {
          this.$refs.mapper.sendTables(fromTableList, toTableList)
        }
        if (this.active !== 4) {
          this.active++
        }
      }
      if (this.active === 4) {
        let arr = []
        this.readerColumns=[]
        this.writerColumns=[]
        // this.readerColumns=this.$refs.mapper.getLTables()
        this.$refs.mapper.getLTables().forEach(item=>{
              this.readerColumns.push(item.columnName)
        })
        this.$refs.mapper.getRTables().forEach(item=>{
          this.writerColumns.push(item.columnName)
        })
        // if(this.$refs.mapper.getLTables().length==this.$refs.mapper.getRTables().length){
        //   this.$refs.mapper.getLTables().forEach(item=>{
        //   this.$refs.mapper.getRTables().forEach(it=>{
        //      if(item.id==it.id){
        //        arr.push({
        //         sourceTableId:item.id,
        //         sourceTableName:item.tableName,
        //         targetTableId:it.id,
        //         targetTableName:it.tableName
        //        })
        //      }
        //   })
        // })
        // if(arr.length!=this.$refs.mapper.getLTables().length){
        //   this.$message.error('数据来源与目标数据源不一致')
        //   return
        // }
        // }else{
        //   this.$message.error('数据来源与目标数据源数量不一致')
        //   return
        // }
        // console.log(arr, 'arr')
        this.detailList = arr
        this.extractionName = this.$refs.mapper.getName().extractionName
        this.status = this.$refs.mapper.getName().status
      }
    },
    last() {
      if (this.active > 1) {
        this.active--
      }
    },
    // 创建单任务
    createJob() {
      const obj = {
        sourceDatasourceId: this.readerInfo.sourceId,
        sourceDatasourceName: this.readerInfo.sourceName,
        isIncrement:this.readerInfo.isIncrement,
        readerDto:{
          querySql:this.readerInfo.querySql,
          readerSplitPk:this.readerInfo.splitPk,
          whereParams:this.readerInfo.where
        },
        targetDatasourceId: this.writerInfo.targetDatasourceId,
        targetDatasourceName: this.writerInfo.sourceName,
        writerDto:{
          postSql:this.writerInfo.postSql,
          preSql:this.writerInfo.preSql
        },
        detailList: [{
          jobJson: this.str,
          readerTable:this.readerInfo.tableName,
          sourceTableId:this.readerInfo.tableId,
          sourceTableName:this.readerInfo.tableName,
          targetTableId:this.writerInfo.tableId,
          targetTableName:this.writerInfo.tableName
        }],
        isCreate: this.writerInfo.status ? '1' : '0',
        extractionName: this.extractionName,
        status: this.status
      }
      jobTemplate.batchAddJob(obj).then(res => {
         
        if(res.data.code==0){
            // 切回第一步
            this.$emit('refreshList')
        this.active = 1
        this.dialogFormVisible = false

        }else{
          this.$message.error(res.data.msg)
        }

      })
      // if(this.detailList.length==0){
      //   this.$message.error('请返回上一步检查所选数据')
      // }else{
      //       // 调api
      // jobTemplate.batchAddJob(obj).then(res => {
      //    
      //   // 切回第一步
      //   this.active = 1
      //   this.dialogFormVisible = false
      // })
      // }

    },
    rest(){
      setTimeout(()=>{
        this.$refs.reader.rest()
      this.$refs.writer.rest()
      this.$refs.mapper.rest()
      },750)

    },
    //构建JSON
    bulid(){
      let obj = {
        rdbmsReader:{
          readerSplitPk:this.readerInfo.splitPk,
          whereParams:this.readerInfo.where,
          querySql:this.readerInfo.querySql
        },
        rdbmsWriter:{
          preSql:this.writerInfo.preSql,
          postSql:this.writerInfo.postSql
        },
        readerDatasourceId: this.readerInfo.sourceId,
        readerTables: [this.readerInfo.tableName],
        readerColumns: this.readerColumns,
        writerDatasourceId: this.writerInfo.targetDatasourceId,
        writerTables: [this.writerInfo.tableName],
        writerColumns: this.writerColumns
      }
        jobTemplate.bulidJson(obj).then(res=>{
        if(res.data.code==200){
          this.str=res.data.data.replaceAll('&amp;','&&')
          this.configJson=JSON.parse(res.data.data)
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    handleCopy(text, event) {
      clip(this.configJson, event)
      this.$message({
        message: 'copy success',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
